<template>
    <div class="shopCart-container">
<!--        商品列表项区域-->
       <div class="goods-list" v-for="(item,i) in goodslist" :key="item.id">
           <div class="mui-card" >
               <div class="mui-card-content">
                   <div class="mui-card-content-inner">
                       <mt-switch v-model="$store.getters.getGoodsSelected[item.id]"
                                  @change="selectedChanged(item.id,$store.getters.getGoodsSelected[item.id])"/>
                       <img :src="item.thumb_path" alt="">
                       <div class="info">
                           <h1>{{item.title}}2</h1>
                           <p>
                               <span class="price">￥{{ item.sell_price}}</span>
                               <numbox :initcount=" $store.getters.getGoodsCount[item.id]" :goodsid="item.id"/>

                               <a href="javascript:" @click.prevent="remove(item.id,i)">删除</a>
                           </p>
                       </div>
                   </div>
               </div>
           </div>
       </div>

<!--        结算区域-->
        <div class="mui-card">
            <div class="mui-card-content">
                <div class="mui-card-content-inner Jie">
                   <div class="left">
                       <p>总计(不含运费)</p>
                       <p>已勾选商品
                           <span class="red">{{ $store.getters.getGoodsCountAndAmount.count}}
                           </span> 件，总价
                           <span class="red">￥{{ $store.getters.getGoodsCountAndAmount.amount}}
                           </span>
                       </p>
                   </div>
                    <mt-button type="danger">去结算</mt-button>
                </div>
            </div>
        </div>


    </div>
</template>

<script>
    import numbox from "../subcomponents/shopcart_numbox.vue"

    export default {
        name: "ShoppingCartContainer",
        data(){
            return{
                goodslist:[] //购物车中所有商品的数据
            }
        },
        created() {
            this.getGoodsList();
        },
        methods:{
            getGoodsList(){
                //获取到store中所有商品的id
                var idArr = [];
                this.$store.state.cart.forEach(item => idArr.push(item.id));

                //如果购物车没有商品，则直接返回，不需要请求数据接口
                if (idArr.length <= 0){
                    return;
                }
                //获取购物车商品的列表
                this.$http.get("api/goods/getshopcarlist/" + idArr.join(",")).then(result =>{
                    if(result.body.status===0){
                        this.goodslist = result.body.message;
                    }
                });
            },
            remove(id, index){ //点击删除，把商品从store中，根据传递的Id删除，同时，把当前组件中的goodslist中，对应的要删除的商品，，使用index来删除
                this.goodslist.splice(index, 1);
                this.$store.commit('removeFormCart',id);
            },
            selectedChanged(id,val){ //每当点击开关，把最新的状态，同步到store中
                //console.log(id, val);
                this.$store.commit('updateGoodSelected',{id,selected:val});
            },
        },
        components:{
            numbox
        }
    }
</script>

<style lang="scss" scoped>
   .shopCart-container{
       background-color: #eee;
       overflow: hidden;
       .goods-list{
           .mui-card-content-inner{
               display: flex;
               align-items: center;
           }
           img {
               width: 60px;
               height: 60px;
           }
           .info{
               display: flex;
               flex-direction: column;
               justify-content: space-between;
               h1{
                   font-size: 10px;
               }
               p{
                   margin-top: 13px;
                   .price{
                       color:red;
                       font-weight: 600;
                   }
               }

           }
       }
       .Jie{
           display: flex;
           justify-content: space-between;
           align-items: center;
           .red{
               color: red;
               font-weight: 600;
               font-size: 16px;
           }
       }
   }
</style>